<template>
	<view class="content diancan-bg">
		
		<view class="top">
			<view class="mendian">

				<view class="name">{{ branchname != undefined ? branchname:''}}</view>
			</view>
			<view class="pingtai">

				<view class="zhangmenyin">
				
					<u-image @click="gotoDenglu()" height="80" mode="heightFix" src="/static/diancan/zmy@3x.png"></u-image>
					
				</view>
			</view>
		</view>
		<view class="left-nav">
			
			<view class="arrow-up" v-show="navArrowUpShow" >
				<u-icon color="#fff" size="25" name="arrow-up"></u-icon> 
			</view>
			
			<scroll-view ref="navField" class="nav-field" scroll-y 
				@scroll="scroll"
				@scrolltoupper="scrolltoupper"
				@scrolltolower="scrolltolower"
				>
				<view ref="navList" class="nav-list">
					<view @click="checkType( item )" 
						:class="{active:item.typecode==checkedTypeCode}"
						v-for='(item,index ) in indexList' :key="index" class="item">
						{{item.typename}}
					</view>
					
					<!-- <view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view><view class="item">1234</view>									 -->
				</view>
				
			</scroll-view>
			
			<view class="arrow-down"  v-show="navArrowDownShow">
				<u-icon color="#fff" size="25"  name="arrow-down"></u-icon> 
			</view>
		</view>
		<view class="net-error" v-show="netError">
			<view class="tupian-message">
				<view class="tupian">
					<u-image width="100%" mode="widthFix" src="/static/diancan/net_error@2x.png" ></u-image>
				</view>
				<view class="message">未链接到服务器<br/>请检查网络</view>
			</view>


		</view>
		<view class="diancan-list">

			
					
			<scroll-view :scroll-top="dishScrollTop" :scroll-into-view="dishScrollView"
				@scroll="dishScroll"
				ref="dishScrollList" class="can-scroll-list" scroll-y="true">
<!-- <view style="height:100%;" v-for="(typeObj,typeIndex) in goodsList" :key="typeIndex" v-show="typeObj.typecode == checkedTypeCode" > -->
<view style="height:100%;" :id="'type-' + typeObj.typecode" v-for="(typeObj,typeIndex) in goodsList" :key="typeIndex"  >
					<u-row justify="flex-start" customStyle="flex-wrap:wrap; width:100%; padding-bottom:220px;" gutter="10">
							
							
							<u-col v-for="(item,index) in typeObj.goodslist" :key="index"
								span="4" class="item-col" >
								
								<view :class="{'sold-out':item.status=='售罄'}" class="can-item" style="height:328px">
										<view class="sold-out-mengban">
											<view class="sold-out-image">
												<u-image mode="aspectFit" width="100%" src="/static/diancan/shouqing.png"></u-image>
											</view>
											
										</view>
									
										
										<u-image @click="showDishDetail(item)" radius="10"  width="100%" height="225px" :src="item.picurl" :lazyLoad="true">
											<template v-slot:loading>
												<!-- <view style="width:100%; height:225px; background-image:'/static/diancan/defaultbig.jpg';"> -->
													<u-icon size="100" name="/static/diancan/huaban.png" color="gray"></u-icon>
												<!-- </view> -->
												<!-- <u-image radius="10" width="100%" height="225px" src="/static/diancan/defaultbig.jpg" ></u-image> -->
												
											  </template>
										</u-image>
										
							
										<view class="name">{{item.goodsname}}</view>
									
									<view class="price-number">
										<view class="price">
											<view class="unit">￥</view>
											<view class="val">{{item.price}}</view>
										</view>
										<view class="number">
											<view class="jian" @click="changeOrder('minus',item)">
												<u-image width="100%" mode="widthFix" src="/static/diancan/jian.png"></u-image>
											</view>
											<view class="num">
												<text v-if="typeof order.goodslist[item.sysid]!='undefined'">{{order.goodslist[item.sysid].numb}}</text>
												<text v-else >0</text>
											</view>
											<view class="jia" @click="changeOrder('plus',item)">
												<u-image width="100%" mode="widthFix" src="/static/diancan/jia.png"></u-image>
											</view>
										</view>
									</view>
									
								</view>
								
							</u-col>	
							
							
						</u-row>
				
				</view>
			</scroll-view>
			
		</view>
		
		<view class="order-field" :class="{active:orderDetailShow==1}">
			
			<view class="order-detail">
				<view class="title">
					已选
				</view>
				<view class="dish-list-field">
					<view class='order-dish-list' 
						v-for="(item,index) in order.goodslist" 
						v-show="item.numb>0"
						:key="index">
						<view class='dish-name'>{{item.goodsname}}</view>
						<view class="number">
							<view class="jian" @click="changeOrder2('minus', item)">
								<u-image width="100%" mode="widthFix" src="/static/diancan/jian.png"></u-image>
							</view>
							<view class="num">
								{{item.numb}}
							</view>
							<view class="jia" @click="changeOrder2('plus', item)">
								<u-image width="100%" mode="widthFix" src="/static/diancan/jia.png"></u-image>
							</view>
						</view>
					</view>
			
				</view>
			</view>
			<view class="order-card">
				<view class="cart-price" @click="showOrderDetail">
											
					<view class="cart-logo">
												
						<u-image width="100%" src="@/static/diancan/cart.png" mode="widthFix"></u-image>
						<u-badge bgColor="#00BEBB" :absolute="true" :offset="[-4,-6]" :type="'warning'" max="99" :value="total_number"></u-badge>
					</view>
				
					<view class="total-price">
						￥{{total_price.toFixed(2)}}
					</view>
					
				</view>
								
				<view class="">
					<u-button @click="orderCheck" class="check-btn" type="primary">确认下单</u-button>
			
				</view>
			
			</view>
		</view>
		<u-overlay :show="woyaodiancanPanelShow">
			<view class="woyaodiancan" >
				<u-image @click="woyaodiancan()" 
					src="/static/diancan/diancan.png"></u-image>
			</view>
		</u-overlay>
		<u-overlay :show="orderOlShow" @click="closeOrderDetail()"></u-overlay>
		<u-overlay zIndex='10072' :show="overlayShow" @click="overlayShow = false" class="pop-overlay">
			
				<view v-if="popType == 'dish-detail' && typeof currentGoods!=null" class="pop dish-detail" @tap.stop>					
					<u-swiper height="280" :list="dish_img_list" ></u-swiper>
					<view class="dish-name-price">
						<view class='dish-name'>
							<view class="name">
								{{currentGoods.goodsname}}
							</view>
							<view class="price">
								<view class="unit">￥</view>
								<view class="val">{{currentGoods.price}}</view>
							</view>
						</view>
						<view class="number">
							<view class="jian" @click="changeOrder('minus',currentGoods)">
								<u-image width="100%" mode="widthFix" src="/static/diancan/jian.png"></u-image>
							</view>
							<view class="num">
								<text v-if="typeof order.goodslist[currentGoods.sysid]!='undefined'">
									{{ order.goodslist[currentGoods.sysid].numb }}
								</text>
								<text v-else > 0 </text>
							</view>
							<view class="jia"  @click="changeOrder('plus',currentGoods)">
								<u-image width="100%" mode="widthFix" src="/static/diancan/jia.png"></u-image>
							</view>
						</view>
					</view>
					
					<view class="notes" v-show='remark_list.length > 0'>
						
						<view class='left-name'>备注</view>
						<view class='note-list'>
							<view v-for="(item,rindex) in remark_list" :key="rindex" 
								@click="changeOrder( 'remark', currentGoods, item )" :class="{ active:order.goodslist[currentGoods.sysid].remark_arr.indexOf(item)>-1 }" class="item">
								{{item}}
							</view>
							
							<view class="customize-item">
								<u-input placeholderStyle="color:#788B8A"  
									customStyle="height:26px;border-radius:5px;" 
									color="#fff" fontSize="18" 
									v-model="order.goodslist[currentGoods.sysid].zdy_remark" 
									placeholder="请输入备注"> </u-input>
							</view>
						</view>
					</view>
					
					<view class="btn-field">
						<u-button @click="diancanCancel( currentGoods )" class='cancel-btn'>取消</u-button>
						<u-button @click="diancanQueding()" class='check-btn'>
							确认
						</u-button>
					</view>
					
					<!--
					<view class="cross" @click="closeDishDetail">
						<u-image width="40" mode="widthFix" src="@/static/diancan/cross.png"></u-image>
					</view>
					-->
				</view>
				
				<view v-if="popType == 'dish-notes'" class="pop dish-notes" @tap.stop>
					dish-notes
				</view>
				
				<view v-if="popType == 'order-check'" class="pop order-check" @tap.stop>
					<view class='order-check-field' @tap="closeRoomList()">
						<view class="title">下单确认</view>
						<view class="check-list">							
							<!-- <view class='check-item' v-show="billtype=='手牌模式'"> -->
							<view class='check-item' >
								<view class="label">手牌：</view>
								<view class="inp">
									<u-input v-model="order.handcode" fontSize="20" border="none" color="#fff" placeholder="请输入手牌号或感应手牌"></u-input>
								</view>
							</view>
							<view class='check-item'>
								<view class="label">桌台：</view>
								<view class="inp relative" @tap.stop>
									<!-- 不能添加blur 事件,否则无法执行checkroom,如果room-list移到外侧可能不受影响 -->
									<u-input @focus="openRoomList()" 
										
										v-model="order.roomcode" 
										fontSize="20" border="none" 
										 color="#fff" placeholder="请输入或选择桌台">
										<template slot="suffix">
											<u-icon  v-show="!roomListShow" @click="openRoomList()" name="arrow-left" size="20" color="#fff"></u-icon>
											<u-icon  v-show="roomListShow" @click="closeRoomList()" name="arrow-down" size="20" color="#fff"></u-icon>											
										</template>
									</u-input>
									
									<view class="room-list" v-show="roomListShow">
										<view v-for="(room,index) in zhuotaiList" :key="index"
											:class="{'active':order.roomcode==room.roomcode}"
											@click="checkRoom(room.roomcode)"
											 class="room">
											 {{room.roomcode}}
										</view>
									</view>
								</view>

							</view>
							<view class='check-item'>
								<view class="label">工号：</view>
								<view class="inp">
									<u-input v-model="order.usercode" fontSize="20" border="none"  color="#fff" placeholder="请输入工号"></u-input>
								</view>
							</view>
							<view class='check-item'>
								<view class="label">密码：</view>
								<view class="inp">
									<u-input v-model="order.userpwd" fontSize="20" border="none"  color="#fff" placeholder="请输入密码" type="password"></u-input>
								</view>
							</view>
						</view>
						<view class="btn-field">
							<u-button @click="orderCancel()" class='cancel-btn'>取消</u-button>
							<u-button @click="orderQueding()" class='check-btn'>
								<text v-show="orderLoading">下单中...</text>
								<text v-show="!orderLoading">确认下单</text>
							</u-button>							
						</view>
						
					</view>
				</view>
				
				<view v-if="popType == 'order-success'" class="pop order-success" @tap.stop>

					<view class="success">
						<view class="note-image">
							<u-image width="80" height="80" mode="widthFix" src="/static/diancan/note-success.png"></u-image>
						</view>
						<view class="msg"> {{orderNoteMessage}} </view>
					</view>
				</view>
				<view v-if="popType == 'order-fail'" class="pop order-fail" @tap.stop>

					<view class="fail">
						<view class="note-image">
							<u-image width="80" height="80" mode="widthFix" src="/static/diancan/note-fail.png"></u-image>
						</view>
						<view class="msg"> {{orderNoteMessage}} </view>
					</view>
				</view>			
			
		</u-overlay>
		
		<!--
		<u-modal width="300px"
			confirmText="升级"
			cancelText="忽略"
			@confirm = 'confirmUpgrade()'
			@cancel = 'cancelUpgrade()'
			:showCancelButton="!appUpgrade.isneed"
			:show="appUpgrade.show" 
			:title="appUpgrade.name" 
			:content='appUpgrade.info'></u-modal>
		 -->
			
			
		<view class="upgrade-popup" v-show="appUpgrade.show" >
				<!-- <image class="header-bg" src='../../static/versionBac.jpg' mode="widthFix"></image> -->
			<view class="main">
				<view class="versionPopupTitleClass">发现新版本</view>
				<view class="versionPopupNameClass">{{appUpgrade.name}}</view>
				<view class="content2">
					<text class="updataContentTitleClass">更新内容</text>
					<view class="updataContentClass" v-html="appUpgrade.info"></view>
				</view>
				<!--下载状态-进度条显示 -->
				<view class="footer" v-if="isStartDownload">
					<view class="progress-view" :class="{'active':!hasProgress}" @click="handleInstallApp">
						<!-- 进度条 -->
						<view v-if="hasProgress" style="height: 100%;">
							<view class="txt">{{percentText}}</view>
							<view class="progress" :style="setProStyle"></view>
						</view>
						<view v-else>
							<view class="btn upgrade force">
								{{ isDownloadFinish  ? '立即安装' :'下载中...'}}
							</view>
						</view>
					</view>
				</view>
				<!-- 强制更新 -->
				<view class="footer" v-else-if="appUpgrade.isneed">
					<view class="btn upgrade force" @click="handleUpgrade">立即体验</view>
				</view>
				<!-- 可选择更新 -->
				<view class="footer" v-else>
					<view class="btn close" @click="handleClose">暂不更新</view>
					<view class="btn upgrade" @click="handleUpgrade">立即体验</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	
	import {
		downloadApp,
		installApp
	} from '../../common/upgrade.js'
	import { initNFC, closeNFC } from '@/uni_modules/wufeng-nfc/js_sdk/nfc.js';  // nfc m1卡 插件
	export default {
		data() {
			return {
				platform:'',
				title:'掌门银点餐系统',
				branchid	: '',
				branchname	: '',
				headid		: '',
				RoomCode	: '',
				apiurl		: '',  // 绑定成功后返回的域名，后续的请求按这个来
				billtype	: '',
				overlayShow:false,
				orderOlShow:false,
				woyaodiancanPanelShow: true,
				checkedTypeCode:'',
				dishScrollTop:0,
				oldDishScrollTop:0,
				dishScrollView:'',
				indexList:[],//类型列表（也是总的数据列表）
				goodsList:{}, // 用来显示在模板中的商品列表数据
				currentGoods:{},//被点击的商品
				popType: '', 
				dish_img_list:[
					'/static/diancan/dish.jpg',
					'/static/diancan/dish.jpg',
					'/static/diancan/dish.jpg',
				], // 显示在弹窗中
				remark_list:[], //被点击的商品的备注列表
				//checkedRemark:'',//被选中的备注
				orderDetailShow:0, //订单详细明细面板打开状态
				order:{
					handcode	: '',
					roomcode	: '',
					usercode	: '',
					userpwd		: '',
					goodslist	: {} //对象列表，为了方便赋值，故设为对象
				},
				total_price:0,
				total_number:0,
				orderNoteMessage:'',
				orderLoading:0,
				roomListShow:false,
				netError:false,  // 是否网络出错
				zhuotaiList:[],  // 房间列表
				
				navArrowUpShow:false,
				navArrowDownShow:false,
				navFieldHeight:0,
				navListHeight:0,
				cardNoNfc:'', // NFC 被读取的卡号吗？待确认
				
				appUpgrade:{
					show	: false,
					code	: '',
					downurl	: '',
					info	: '',
					isneed	: 0,
					name	: '',
				},
				isDownloadFinish: false, //是否下载完成
				hasProgress: false, //是否能显示进度条
				currentPercent: 0, //当前下载百分比
				isStartDownload: false, //是否开始下载
				fileName: '', //下载后app本地路径名称
			}
		},
		onLoad() {
			
			const systemInfo = uni.getSystemInfoSync()
			this.platform = systemInfo.platform.toLowerCase();
				
			//this.init();
			//this.getProductList();
			//this.getRoomList();

			if( this.platform == 'android' ){
				this.initNFCM1();
			}

		},
		onUnload() {
			this.cardNoNfc = '';
			closeNFC();
		},
		onShow(){
			this.init();
			this.getProductList();
			this.getRoomList();
		},
		mounted(){
			//this.getProductList();
			//this.getRoomList();			
		},
		
		computed: {
			//设置进度条样式，实时更新进度位置
			setProStyle() {
				return {
					width: (510 * this.currentPercent / 100) + 'rpx' //510：按钮进度条宽度
				}
			},
 
			//百分比文字
			percentText() {
				let percent = this.currentPercent;
				if (typeof percent !== 'number' || isNaN(percent)) return '下载中...'
				if (percent < 100) return `下载中${percent}%`
				return '立即安装'
			}
 
		},

		methods: {
			
			// 读取 nfc M1 卡信息
			initNFCM1:function(){
				var _this = this;
				initNFC(function(cardNo){
					_this.getNFCCardNo(cardNo);
				});
			},

			hexStringtoString:function( hexString ){
				//let hexString = "48656c6c6f"; // "Hello"的十六进制表示
				// 将十六进制字符串转换为单个字符数组
				let chars = [];
				for (let i = 0; i < hexString.length; i += 2) {
				    chars.push(String.fromCharCode(parseInt(hexString.substr(i, 2), 16)));
				}
				 
				// 将字符数组连接成字符串
				let result = chars.join('');
				return result;
			},
			getNFCCardNo:function( sourceCardNo ){
				//console.log( 'nfcMethod sourceCardNo:' + sourceCardNo );
				let cardLength = parseInt(sourceCardNo.substring(0,2), 16);
				let split = sourceCardNo.substring(4);
				split = this.hexStringtoString( split );
				split  = split.substring(0, cardLength);
				//console.log( 'nfcMethod split:' + split );
				this.order.handcode = split;
			},
			gotoDenglu:function(){
				 let _this = this;
				  let curTime = new Date().getTime();
				  let lastTime = _this.lastTapDiffTime;
				  _this.lastTapDiffTime = curTime;
				  //两次点击间隔小于300ms, 认为是双击
				  let diff = curTime - lastTime;
				  if (diff < 300) {
				   	console.log("双击")
					
				   	//_this.handleVideo('screen',index)自定义事件
				   clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
				   
				   uni.navigateTo({
				   	url:'/pages/bangding/bangding'
				   });
				   
				 } else {
				  // 单击事件延时300毫秒执行
				   _this.lastTapTimeoutFunc = setTimeout(function() {
				   	console.log("单击")
				   //_this.handleVideo('playOrStop',index)自定义事件
				   	}, 300);
				 } 		
				
				
			},
			
			init:function(){
					
				this.branchid = uni.getStorageSync('branchid');
				this.branchname = uni.getStorageSync('branchname');
				this.headid = uni.getStorageSync('headid');
				this.RoomCode = uni.getStorageSync('RoomCode');
				this.apiurl = uni.getStorageSync('apiurl');
				this.billtype = uni.getStorageSync('billtype'); //返回值：手牌模式，房间模式
				this.UserCode = uni.getStorageSync('UserCode');
				//this.Account = uni.getStorageSync('Account');
				
				this.order.roomcode = this.RoomCode; // 自动填写到下单的表单中
				this.order.usercode = this.UserCode; // 自动填写到下单的表单中
				//this.order.Account = this.Account;

				// #ifdef APP-PLUS
				
				// #endif
				if( this.headid && this.branchid){
					this.getAppVersion();
				}
			},
			
			woyaodiancan:function(){
				// todo 去掉“我要点餐”蒙版
				this.woyaodiancanPanelShow = false;
				// todo 重新刷新商品列表，防止有售罄的商品被点
				this.getProductList();
				this.getRoomList();
			},
			
			checkType:function( currentObj ){
				
				this.checkedTypeCode = currentObj.typecode;
				this.dishScrollTop = this.oldDishScrollTop;
				this.$nextTick(() => {
					// this.dishScrollTop = 0;
					this.dishScrollView = 'type-' + currentObj.typecode; // 滚动到指定位置，（菜品全显示的情况下）
				})
				
				if( !this.goodsList[ currentObj.typecode ] ){
					this.goodsList[ currentObj.typecode ] = currentObj;
				}
				
				//this.$nextTick(() => {
				//	this.initNavScroll();
				//})
			},
			
			dishScroll:function ( e ) {
				this.oldDishScrollTop = e.detail.scrollTop
			},
			
			
			//checkRemark:function( remark ){
			//	this.checkedRemark = remark;
			//	this.changeOrder('remark', this.currentGoods);
			//},
			
			changeOrder2:function(type, item){
				
				var single_price = item.single_price;
				
				if( type=='plus' ){
					item.numb++;
					this.order.goodslist[item.sysid].price = single_price * item.numb;
				}
				
				if( type=='minus'){
					item.numb--;
					if( item.numb < 1){
						item.numb = 0;
					}
					this.order.goodslist[item.sysid].price = single_price * item.numb;
					//if( item.numb < 1 ){
					//	delete this.order.goodslist[item.sysid];
					//}
				}
				
				
				this.total_price = 0;	
				this.total_number = 0;
				for( var p in this.order.goodslist ){
					var og = this.order.goodslist[p];
					this.total_price += parseFloat(og.price);
					this.total_number += og.numb;
				}
				this.total_price = this.total_price>0?this.total_price:0;
				this.$forceUpdate();
				
			},
			
			changeOrder:function(type, item , checkedRemark){
				
				if( type=='plus'){
					if(!this.order.goodslist[item.sysid]){
						
						this.createOrderGoods( item );
						
					}
					
					this.order.goodslist[item.sysid].numb ++;
					this.order.goodslist[item.sysid].price = this.order.goodslist[item.sysid].numb * item.price;
					
					//todo 判断该商品是否有备注，有备注并且从0开始添加时，需要打开商品详情的弹窗
					if( item.makeremark1 && this.order.goodslist[item.sysid].numb==1){
						this.showDishDetail( item );
					}
				}
				if( type=='minus'){
					if(this.order.goodslist[item.sysid]){
						this.order.goodslist[item.sysid].numb --;
						if( this.order.goodslist[item.sysid].numb < 1){
							this.order.goodslist[item.sysid].numb = 0;
						}
						this.order.goodslist[item.sysid].price = this.order.goodslist[item.sysid].numb * item.price;
						//if( this.order.goodslist[item.sysid].numb < 1){
						//	delete this.order.goodslist[item.sysid];
						//}

					}
				}
				
				// 清空该菜品
				if( type=='clear'){
					if(this.order.goodslist[item.sysid]){
						this.order.goodslist[item.sysid].numb = 0;
						this.order.goodslist[item.sysid].price = this.order.goodslist[item.sysid].numb * item.price;
					}
				}
				
				if( type == 'remark' ){
					
					this.createOrderGoods( item );
					
					var pos = this.order.goodslist[item.sysid].remark_arr.indexOf( checkedRemark );
					if( pos > -1 ){
						this.order.goodslist[item.sysid].remark_arr.splice(pos,1);
					}else{
						this.order.goodslist[item.sysid].remark_arr.push( checkedRemark );
					}

				}
				
				
				this.$forceUpdate();
				
				this.total_price = 0;
				this.total_number = 0;
				for( var p in this.order.goodslist ){
					var item = this.order.goodslist[p];
					this.total_price += parseFloat( item.price ) ;
					this.total_number += item.numb;
				}
				this.total_price = this.total_price>0?this.total_price:0;
				//console.log('order:', this.order);
			},
			
			createOrderGoods:function( goods ){
				
				if(!this.order.goodslist[goods.sysid]){
					this.order.goodslist[goods.sysid] = {
						goodsname	: goods.goodsname,
						sysid		: goods.sysid,
						numb		: 0,
						price		: 0,  // 单位商品总价（数量 * 单价）
						single_price: goods.price,
						//markremark: '',
						remark_arr	: [],
						zdy_remark	: ''  // 自定义 remark
					}
				}
				
			},
			
			getProductList:function(){
				
				const timestamp = new Date().getTime();
				//var url = 'http://pay.51yitui.cn/PB/Meal/index';
				var url = this.apiurl + '/PB/Meal/index';
				url += '?method=goodslist';
				
				var headid = uni.getStorageSync('headid');
				var branchid = uni.getStorageSync('branchid');
				
				if(!headid||!branchid){
					uni.navigateTo({
						url:'/pages/bangding/bangding'
					})
				}
				url += '&headid=' + headid;
				url += '&branchid=' + branchid;
				url += '&timestamp=' + timestamp;
				
				

				
				const paramsString = JSON.stringify({
					goodstype:'点餐'
				});
				
				let message = 'ZMY*DC_2PB' + headid + branchid + timestamp + paramsString ;
				const CryptoJS = require("crypto-js");
				var signature = CryptoJS.MD5(message).toString();
				signature = signature.slice(-32);
				url += '&signature=' + signature;				
				var data = {
					data: paramsString
				};
				var t = this;
				
				uni.request({
					url: url,
					data:data,
					method:'POST',
					success: res => {
						
						if( !res.data.status ){
							t.indexList = res.data.data;
							t.checkType( t.indexList[0] );
						}
						
						this.$nextTick(() => {
							this.initNavScroll();
						})
						
						//this.netError = true; // 用来测试
						
						
					},
					fail: (error) => {
						console.error('上传失败:', error);
						// 显示 失败的页面
						this.netError = true;
					}
				});
			},
			
			closeOrderDetail:function(){
				this.orderDetailShow = 0;
				this.orderOlShow = false;
			},
			showOrderDetail:function(  ){
				if( !this.orderDetailShow ){
					this.orderDetailShow = 1;
					this.orderOlShow = true;
				}else{
					this.orderDetailShow = 0;
				}

			},
			closeDishDetail:function(){
				this.overlayShow = false;
				this.popType = '';				
			},
			
			showDishDetail:function( goodsObject ){
				
				this.overlayShow = true;
				this.popType = 'dish-detail';
				this.currentGoods=goodsObject;
				this.dish_img_list=[];
				if( goodsObject.pic1 ){
					this.dish_img_list.push( goodsObject.pic1 );
				}
				if( goodsObject.pic2 ){
					this.dish_img_list.push( goodsObject.pic2 );
				}
				if( goodsObject.pic3 ){
					this.dish_img_list.push( goodsObject.pic3 );
				}
				if( goodsObject.pic4 ){
					this.dish_img_list.push( goodsObject.pic4 );
				}
				if( goodsObject.pic5 ){
					this.dish_img_list.push( goodsObject.pic5 );
				}
				this.remark_list = [];
				if( goodsObject.makeremark1 ){
					this.remark_list.push( goodsObject.makeremark1 );
				}
				if( goodsObject.makeremark2 ){
					this.remark_list.push( goodsObject.makeremark2 );
				}
				if( goodsObject.makeremark3 ){
					this.remark_list.push( goodsObject.makeremark3 );
				}
				if( goodsObject.makeremark4 ){
					this.remark_list.push( goodsObject.makeremark4 );
				}
				
				
				this.createOrderGoods( goodsObject );
			},
			
			diancanCancel:function( goodsObj ){
				// todo 从购物车中删除该菜品
				this.changeOrder('clear', goodsObj );
				this.closeDishDetail();
			},
			diancanQueding:function(){
				this.closeDishDetail();
			},
			
			orderCheck:function(){
				
				this.overlayShow = true;
				this.popType = 'order-check';
			},
			orderCancel:function(){
				this.overlayShow = false;
				this.popType = '';
				this.order.userpwd = '';
			},
			
			openRoomList:function(){
				this.roomListShow = true;
			},
			closeRoomList:function(){
				this.roomListShow = false;
			},
			checkRoom:function( room ){
				console.log( room );
				this.order.roomcode = room;
				this.closeRoomList();
			},
			
			getRoomList:function(){
				
				var url = this.apiurl + '/PB/Meal/index';
				//var url = 'http://pay.zhangmenyin.com/PB/Meal/index';  // 测试地址， 之后换正式的
				url += '?method=roomlist';
				var headid = uni.getStorageSync('headid');
				var branchid = uni.getStorageSync('branchid');
				var timestamp = new Date().getTime();
				url += '&headid=' + headid;
				url += '&branchid='+ branchid;
				
				url += '&timestamp=' + timestamp;
				
				var params = {
					opertype:'点餐'
				};
				var paramsString = JSON.stringify( params );
				
				let message = 'ZMY*DC_2PB' + headid + branchid + timestamp + paramsString ;
				const CryptoJS = require("crypto-js");
				var signature = CryptoJS.MD5(message).toString();
				signature = signature.slice(-32);
				url += '&signature=' + signature;
				
				var data = {
					data:paramsString
				};
				var t = this;
				uni.request({
					
					url:url,
					data:data,
					method:'POST',
					success:function( res ){
						if( !res.data.status ){
							t.zhuotaiList = res.data.data;
						}
					}
				});
				
			},
			
			orderQueding:function(){
				
				if( this.orderLoading ){
					return;
				}
				var ogList =[];
				for(var p in this.order.goodslist){
					
					var curr = this.order.goodslist[p];
					if( !curr.numb ){
						continue;
					}
					var remark = curr.remark_arr.join();
					curr.zdy_remark = curr.zdy_remark.trim();
					if( curr.zdy_remark ){
						if( remark ){
							remark += ',' + curr.zdy_remark;
						}else{
							remark += curr.zdy_remark;
						}						
					}
					
					ogList.push( {
						sysid:curr.sysid,
						numb:curr.numb+'',
						price:curr.price+'',
						markremark:remark,
					});
				}
				
				var params = {
					handcode	: this.order.handcode.trim(),
					roomcode	: this.order.roomcode.trim(),
					usercode	: this.order.usercode.trim(),
					userpwd		: this.order.userpwd,
					goodslist	: ogList,
				};
				
				// 需求已更改，代码废除
				//if(this.billtype == '房间模式' ){
				//	params.handcode = params.roomcode;
				//}
				
				var paramsString = JSON.stringify( params );
				//var url = 'http://pay.51yitui.cn/PB/Meal/index';
				var url = this.apiurl + '/PB/Meal/index';
				url += '?method=addorderconfirm';
				var headid = uni.getStorageSync('headid');
				var branchid = uni.getStorageSync('branchid');
				var timestamp = new Date().getTime();
				url += '&headid=' + headid;
				url += '&branchid='+ branchid;
				
				url += '&timestamp=' + timestamp;
				
				let message = 'ZMY*DC_2PB' + headid + branchid + timestamp + paramsString ;
				const CryptoJS = require("crypto-js");
				var signature = CryptoJS.MD5(message).toString();
				signature = signature.slice(-32);
				url += '&signature=' + signature;
				
				var data = {
					data:paramsString
				};
				var t = this;
				this.orderLoading = 1;
				uni.request({
					
					url:url,
					data:data,
					method:'POST',
					success:function( res ){
						if( !res.data.status ){
							t.overlayShow = true;
							t.popType = 'order-success';
							
							//todo 清空下单参数信息
							t.order.goodslist = {};
							t.order.handcode = '';
							t.total_price = 0;
							t.total_number = 0;
							//t.order.roomcode = ''; //需要保存，不能清除
							//t.order.usercode = ''; //需要保存，不能清除
							t.order.userpwd = '';
							t.closeOrderDetail();
							t.woyaodiancanPanelShow = true;
						}else{
							t.overlayShow = true;
							t.popType = 'order-fail';
						}
						if(res.data.message ){
							t.orderNoteMessage = res.data.message;
						}
						
						//todo 2秒后关闭 订单提示窗口
						setTimeout(()=>{
							if( t.overlayShow ){
								if(t.popType == 'order-success' || t.popType == 'order-fail' ){
									t.overlayShow= false;
								}
							}

						},2000);
					},
					complete:()=>{
						this.orderLoading = 0;
					}
					
				});
				
			},
			
			initNavScroll:function(){
			
				//todo 获取导航高度，
				//todo 获取导航内部滚动条高度，
				
				let query = uni.createSelectorQuery().in(this);
				const p1 = new Promise((resolve,reject)=>{
					query.select('.nav-field').fields({
						size: true,
						scrollOffset: true
					}, data => { 
						//console.log("得到节点信息", JSON.stringify(data));
						//console.log(data.height)
						this.navFieldHeight = data.height;
						resolve();
					}).exec();
				});
				const p2 = new Promise((resolve,reject)=>{
					query.select('.nav-list').fields({
						size: true,
						scrollOffset: true
					}, data => { 
						//console.log("得到节点信息", JSON.stringify(data));
						//console.log(data.height)
						this.navListHeight = data.height;
						if( !data.height ){
							reject();
						}else{
							resolve();
						}

					}).exec();
				});
				
				Promise.all([p1,p2]).then((results) => {

					
					//console.log( 'initNavScroll:', this.navFieldHeight, this.navListHeight );
					if( this.navFieldHeight < this.navListHeight ){
						
						this.navArrowDownShow = true;
					}
				}).catch((error) => {
					console.error('查询失败', error);
					this.initNavScroll();
				});
				
				
			
			},
			
			scrolltoupper:function( option ){
				//console.log( 'scrolltoupper:', typeof options );
				//this.navArrowUpShow = false;
			},
			
			scrolltolower:function( option ){

				//console.log( 'scrolltolower:', typeof options );
				//this.navArrowDownShow = false;
			},
			
			scroll:function( options ){
				
				
				if( options.detail.scrollTop > 0 ){
					this.navArrowUpShow = true;
				}else{
					this.navArrowUpShow = false;
				}
				
				//this.navFieldHeight = this.$refs.navField.$el.offsetHeight;
				//this.navListHeight = this.$refs.navList.$el.offsetHeight;
				console.log( 'scroll.:', options.detail );
				console.log( 'navFieldHeight:', this.$refs.navField, this.navFieldHeight );
				console.log( 'navListHeight:', this.$refs.navList, this.navListHeight );
				var scrollSpan = this.navListHeight - this.navFieldHeight;
				
				if( options.detail.scrollTop >= scrollSpan ){
					this.navArrowDownShow = false;
				}else{
					this.navArrowDownShow = true;
				}
				
			},
			
			// 升级代码
			getAppVersion:function(){

				const systemInfo = uni.getSystemInfoSync();
				
				// #ifdef H5
				let versionCode = systemInfo.appVersion;
				// #endif
				// #ifndef H5
				let versionCode = systemInfo.appWgtVersion;
				// #endif

				versionCode = versionCode.split('.')[2];

				// todo 先获取新版本
				// todo 下载
				// todo 安装
				const CryptoJS = require("crypto-js");
				var api_url = 'https://open.cnzuzhi.com/PB/Meal/index';
				
				api_url += '?method=appversion';
				
				let timestamp = new Date().getTime();
				
				var headid = uni.getStorageSync('headid');
				var branchid = uni.getStorageSync('branchid');
				
				api_url += '&headid=' + headid;
				api_url += '&branchid='+ branchid;
				
				api_url += '&timestamp=' + timestamp;
				var params = {
					"softtypecode"	:	'ZMYPBDC',
					"numb"			:	versionCode,
				};
				let paramsString = JSON.stringify( params );
				let message = 'ZMY*DC_2PB' + headid + branchid + timestamp + paramsString ;
				var signature = CryptoJS.MD5(message).toString();
				signature = signature.slice(-32);
				api_url += '&signature=' + signature;
				var data = {
					data: paramsString
				};
				
				var t = this;
				this.loading = 1;
				uni.request({
					url: api_url,
					data: data,
					method: 'POST',
					success: res => {
						
						//console.log( 'app version info:', res );						
						if( !res.data.status ){
							// todo 显示下载弹出框， 用户点击下载
							let callbackData = res.data.data;
							
							if( callbackData.downurl ){
								
								// todo 显示升级弹窗
								t.appUpgrade.code = callbackData.code;
								t.appUpgrade.downurl = callbackData.downurl;
								t.appUpgrade.info = callbackData.info;
								t.appUpgrade.isneed = callbackData.isneed;
								t.appUpgrade.name = callbackData.name;
								t.appUpgrade.show = true;
							}
							
				
							// else 用来测试, 切记！！完事删掉 else 代码块！
							//else{
							//	t.appUpgrade.downurl = 'https://tp.x-mii.com/storage/zmydc_1.0.0.apk';
							//	t.handleUpgrade();
							//}
							
						}
					},
					fail: ( res ) => {
						
						console.log( 'fail:', res );
					}
					
				});
			},
			
			confirmUpgrade:function(){
				this.appUpgrade.show = false;
				this.handleUpgrade();
			},
			
			cancelUpgrade(){
				this.appUpgrade.show = false;
				
				// todo 把忽略的版本信息保存，以便下次不再弹出
			},
			
			//更新
			handleUpgrade() {
				if( this.platform == 'ios'){
					uni.showToast({
						title: '请到应用市场下载更新',
						icon: 'none'
					})
					return;
				}
				if ( this.appUpgrade.downurl ) {
					this.isStartDownload = true
					//开始下载App
					downloadApp( this.appUpgrade.downurl, current => {
						//下载进度监听
						this.hasProgress = true
						this.currentPercent = current
					}).then(fileName => {
						//下载完成
						this.isDownloadFinish = true
						this.fileName = fileName
						if (fileName) {
							//自动安装App
							this.handleInstallApp()
						}
					}).catch(e => {
						console.log(e, 'e')
					})
				} else {
					uni.showToast({
						title: '下载链接不存在',
						icon: 'none'
					})
				}
			},
			
			//安装app
			handleInstallApp() {
				//下载完成才能安装，防止下载过程中点击
				if (this.isDownloadFinish && this.fileName) {
					installApp(this.fileName, () => {
						//安装成功,关闭升级弹窗
						//uni.navigateBack()
						this.appUpgrade.show = false;
					})
				}
			},
			
			//关闭返回
			handleClose() {
				this.appUpgrade.show = false;
				uni.setStorageSync('upDateTime',Math.floor(new Date().getTime() / 1000))
				uni.setStorageSync('isUpdate',true)
				//uni.navigateBack()
			},
			
		}
	}
</script>

<style lang="less">
	
.relative{
	position:relative;
}

.diancan-bg{
	background-image: url('../../static/diancan/bj.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width:100%;
	height:100vh;
	overflow:hidden;
	
	position:relative;
}

.top{
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	height:60px;
	padding:0 20px 0 20px;
}
.mendian{
	
	.name{
		
		font-size:20px;
		color:#fff;
		font-weight:bold;
		
	}
}
.pingtai{
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.zhangmenyin{
		width:175px;
		
	}
	
	.system{
		color: #008986;
		font-size:28px;
	}
	
}


@wholeheight : 100vh;
@leftnavtop : 60px;
.left-nav{
	
	position:absolute;
	left:0;
	//top:60px;
	top:@leftnavtop;
	width: 148px;
	height:calc(@wholeheight - @leftnavtop + 2px);
	//height:966px; // 测试完成删掉
	box-sizing: border-box;
	//padding-bottom:40px;
	overflow-y: auto;
	background: #26272B;
	border-radius: 0px 32px 0px 0px;
	border: 2px solid;
	// border-image: linear-gradient(157deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.33)) 2 2;
	border-color: rgba(255, 255, 255, 0.618);//上面的代码会导致圆角消失，故采用border-color单色代替
	
	
	.arrow-up,.arrow-down{
		width:100%;
		position:absolute;
		height:25px;
		text-align:center;
		
		.u-icon{
			width:25px;
			margin:0 auto;
		}
	}
	.arrow-up{
		top:0;
	}
	.arrow-down{
		bottom:0;
	}
	.nav-field{
		height:100%;
		padding-top:25px;
		padding-bottom:25px;
		box-sizing: border-box;
		.nav-list{
			
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
	
	
	.item{
		
		//margin-top:20px;
		margin-bottom:20px;
		width: 116px;
		height: 58px;
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 18px;
		color: #FFFFFF;

		text-align: center;
		font-style: normal;

		flex:none;
		
		display:flex;
		align-items: center;
		justify-content: center;
		
		
		&.active{
			
			
			background: linear-gradient( 180deg, #DDC3AE 0%, #B89076 100%);
			border-radius: 12px;
			color:#000000;
		}
		
	}
}

.diancan-list{
	
	//padding: 20px 0 0 160px;
	padding: 0px 0 0 160px;	
	height:100%;
	.can-scroll-list{
		
		display: flex;
		flex-wrap: wrap;
		overflow-y: auto;
		height:100%;
	}
	.item-col{
		padding: 	10px;
	}
	
	.can-item{
		
		background: #26272B;
		border-radius: 24px;
		padding:10px;
		color:#FFFFFF;
		font-size: 20px;
		/* margin:0 0 20px 0; */
		position: relative;
		overflow:hidden;
		&.sold-out{
			
			.sold-out-mengban{
				display:block;
			}
			
			.number{
				display:none;
			}
		}
		.sold-out-mengban{
			display:none;
			width:100%;
			height:100%;
			position:absolute;	
			z-index: 1;
			top:0;
			left:0;
			opacity: 0.7;
			background-color: #000;
			
			
			.sold-out-image{
				margin:10px auto;
				width:70%;
				text-align: center;
				
			}
		}
		.name{
			
			
			height:43px;
			line-height: 43px;
		}
		
		.price-number{
			display: flex;
			justify-content:space-between;
			align-items: center;
			height:40px;
			.price{
				display:flex;
				align-items: baseline;
				.unit{
					font-size:16px;
				}
				.val{
					font-size:24px;
				}
			}
			
		}
		
	}

}

.number{
	
	
	display: flex;
	justify-content:space-between;
	align-items: center;
	
	.jia{
		width:38px;
		height:34px;
		overflow: hidden;
	}
	
	.jian{
		width:38px;
		height:34px;
		overflow: hidden;
	}
	.num{
		
		width:26px;
		//width:50px;
		text-align:center;
		
	}
}
.order-field{
	
	position:absolute;
	z-index: 10071;
	bottom:0;
	right:0;
	//width: 419px;
	width: 350px;
	color:#fff;
	background: rgba(66,105,105,0.7);
	border-radius: 20px 0px 0px 0px;
	border: 2px solid #979797;
	backdrop-filter: blur(10px);
		
	&.active{
		.order-card{
			background: #7A9393;
		}
		.order-detail{
			display:block;
		}
	}
	.order-detail{
		
		display:none;
		width: 100%;
		//min-height: 400px;
		//max-height: 410px;
		height:calc(100vh - 60px - 60px - 5px);
        overflow-y: auto;
		padding:20px 20px;
		
		box-sizing: border-box;
		
		.title{
			text-align: center;
			font-size:20px;
		}
		
		.order-dish-list{
			
			display: flex;
			justify-content: space-between;
			font-size:17px;
			align-items: center;
			padding:20px 0;
			border-bottom: 1px solid #69776F;
			.dish-name{
				
			}
			
			&:last-child{
				border:none;
			}
		}
		
	}
	
	
	.order-card{
		
		box-sizing: border-box;
		padding:0 20px;
		
		
		width: 100%;
		//height: 86px;
		height: 60px;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		
		.cart-price{
			width:30%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.cart-logo{
				width:42px;
				height:42px;
				position:relative;
				flex:none;
			}
			.total-price{
				font-size:20px;
			}
		}
		
		.check-btn{
			font-size:17px;
			
			width: 130px;
			height: 46px;
			background: linear-gradient( 180deg, #00BEBB 0%, #008986 100%);
			border-radius: 23px;
			border:none;
		}
	}
}

.pop-overlay{
	display:flex;
	justify-content: center;
	align-items: center;
	width:100%;
	.pop{
		margin:0 auto;
		&.dish-detail{
			padding:20px;
			box-sizing: border-box;
			//width: 645px;
			width: 545px;
			height: auto;
			min-height:300px;
			background: rgba(66,105,105,0.7);
			border-radius: 22px;
			border: 2px solid #979797;
			backdrop-filter: blur(10px);
			
			position:relative;
			top: -10px;
			.cross{
				width:40px;
				height:40px;
				position:absolute;
				bottom:-50px;
				left:50%;
				margin-left:-20px;
			}
		}
	}
}

.dish-name-price{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 20px;
	height: 28px;
	padding:20px  0 ;
	.dish-name{
		flex: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color:#fff;
		
		.price{
			padding-right:20px;
			display: flex;
			align-items: baseline;
			.unit{
				
			}
			.val{
				font-size:32px;
			}
		}
	}
	.number{
		color:#fff;
		align-items: center;
	}
}
.notes{
	display: flex;
	justify-content: space-between;	
	margin-bottom: 20px;
	
	.left-name{
		font-size:15px;
		//width:120px;
		width:65px;
		color:#fff;
		line-height: 2;
	}
	.note-list{
		
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex: auto;
		.item{
			
			width: 48%;
			height: 40px;
			line-height: 40px;
			color: #00A9A6;
			text-align: center;
			font-size:18px;
			border-radius: 6px;
			border: 1px solid #00A9A6;
			//margin-bottom:20px;
			margin-bottom:10px;
			&.active{
				background: linear-gradient( 180deg, #00BEBB 0%, #008986 100%);
				border-radius: 6px;
				color:#fff;
			}

		}
		.customize-item{
			width:100%;
		}
	}
}
.order-check-field{
	width: 606px;
	height: 529px;
	background: rgba(66,105,105,0.7);
	border-radius: 22px;
	border: 2px solid #979797;
	backdrop-filter: blur(10px);
	padding:40px;
	box-sizing:border-box;

	
	.title{

		font-weight: 600;
		font-size: 20px;
		color: #FFFFFF;
		line-height: 28px;
		text-align: center;
		font-style: normal;
		margin-bottom:20px;
	}
	.check-list{
		color: #BEFDF8;
		.check-item{
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom:20px;
			font-size:20px;
			font-weight: lighter;
			.inp{
				width:80%;
				height: 58px;
				border-radius: 12px;
				border: 1px solid #FFFFFF;
				display: flex;
				align-items: center;
				padding:0 20px;
				box-sizing: border-box;
				.input-placeholder{
					color: #788B8A;
					font-size:20px;
				}
			}
		}
	}
	
}
.btn-field{
	display: flex;
	justify-content: space-evenly;
	font-size: 17px;
	
	.cancel-btn{
		width: 130px;
		height: 46px;
		border-radius: 23px;
		border: 1px solid #00A9A6;
		color:#00A9A6;
		font-size: 17px;
		
		background-color: transparent;
		margin:0;
	}
	.check-btn{
		width: 130px;
		height: 46px;
		background: linear-gradient( 180deg, #00BEBB 0%, #008986 100%);
		border-radius: 23px;
		color:#fff;
		border: none;
		font-size: 17px;
		margin:0;
	}

}
	
.order-fail,.order-success{
	
	.success,.fail{
		width: 314px;
		height: 194px;
		background: rgba(66,105,105,0.7);
		border-radius: 16px;
		border: 2px solid #979797;
		backdrop-filter: blur(10px);
		text-align:center;
		.note-image{
			width:80px;
			margin:20px auto ;
		}
		
		.msg{
			color:#fff;
			font-size:20px;
		}
	}
}

.room-list{
	
	position:absolute;
	z-index:1;
	width:100%;
	height:218px;
	overflow-y:auto;
	bottom:-228px;
	left:0;
	border:solid 1px #fff;
	background: #5E807E;
	border-radius: 12px;
	padding:20px 20px;
	box-sizing:border-box;
	
	.room{
		
		float:left;
		//width: 70px;
		width: 25%;
		height: 30px;
		margin-bottom:20px;
		line-height: 30px;
		border-radius: 6px;
		font-weight: 600;
		font-size: 16px;
		color:#fff;
		font-weight: 600;
		text-align:center;
		
		&.active{
			color:#000;
			background: linear-gradient( 180deg, #DDC3AE 0%, #B89076 100%);
			border-radius: 6px;
		}
		
	}
	&::after{
		clear:both;
		content:'';
	}
}


.net-error{
	width:100%;
	height:100%;
	text-align:center;
	display:flex;
	justify-content: center;
	align-items: center;
	padding-left:144px; // 这个取自 左边导航的宽度， 并且要随着改变
	box-sizing: border-box;
	.tupian-message{
		position:relative;
		top:-100px;
		width:165px;
		.tupian{
			width:165px;
			height:229px;
		}
		.message{
			margin-top:20px;
			font-size : 20px;
			color:#fff;
			line-height: 28px;
			text-align: center;
		}	
	}

}

.woyaodiancan{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

</style>

/* scss */
<style lang="scss" scoped>
	.upgrade-popup {
		//width: 610rpx;
		//height: 654.14rpx;
		width: 610rpx;
		height: 300rpx;
		position: fixed;
		top: 50%;
		left: 52%;
		transform: translate(-50%, -50%);
		border-radius: 20rpx;
		box-sizing: border-box;
	}
 
	.header-bg {
		width: 100%;
	}
	.main {
		position: absolute;
		//top: 69rpx;
		//padding-left: 35rpx;
		padding:10rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius:10px;
 
		.footer {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			flex-shrink: 0;
			margin-top: 100rpx;
 
			.btn {
				width: 246rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 999;
				height: 96rpx;
				box-sizing: border-box;
				font-size: 38rpx;
				font-family: Source Han Sans-Regular;
				border-radius: 10rpx;
				letter-spacing: 2rpx;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				&.force {
					width: 500rpx;
				}
 
				&.close {
					margin-right: 25rpx;
					background: #E1E1E1;
					font-weight: 400;
					font-size: 34rpx;
					color: #3D3D3D;
				}
 
				&.upgrade {
					background: linear-gradient( 90deg, #FF470B 1%, #FC966E 100%);
					color: white;
				}
 
			}
 
			.progress-view {
				width: 500rpx;
				height: 90rpx;
				display: flex;
				position: relative;
				align-items: center;
				border-radius: 50rpx;
				background-color: #FFCEBE;
				display: flex;
				justify-content: flex-start;
				padding: 0px;
				box-sizing: border-box;
				border: none;
				overflow: hidden;
				font-size: 38rpx;
				font-family: Source Han Sans-Regular;
				&.active {
					// background-color: #FFCEBE;
					background: linear-gradient( 90deg, #FF470B 1%, #FC966E 100%);
					border-radius: 50rpx 50rpx 50rpx 50rpx;
				}
				.progress {
					height: 100%;
					// background-color: #FFCEBE;
					background: linear-gradient( 90deg, #FF470B 1%, #FC966E 100%);
					padding: 0px;
					box-sizing: border-box;
					border: none;
					border-radius: 50rpx;
				}
 
				.txt {
					
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: #fff;
 
				}
 
			}
 
		}
 
	}
	.content2 {
		margin-top: 60rpx;
	}
	.versionPopupTitleClass{
		height: 53rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 700;
		font-size: 38rpx;
		color: #3D3D3D;
		line-height: 53rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		//margin-top: 41.35rpx;
	}
	.versionPopupNameClass{
		//width: 71rpx;
		height: 38rpx;
		font-family: Source Han Sans-Regular;
		font-weight: 350;
		font-size: 26rpx;
		color: #ADADAD;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 8rpx;
	}
	.updataContentTitleClass{
		height: 38rpx;
		font-family: Source Han Sans-Regular;
		font-weight: 400;
		font-size: 26rpx;
		color: #3D3D3D;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 120rpx;
	}
	.updataContentClass{
		height: 32rpx;
		font-family: Source Han Sans-Regular;
		font-weight: 400;
		font-size: 23rpx;
		color: #727272;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 16.92rpx;
	}
	.zanbugengxinClass{
		width: 252rpx;
		height: 92rpx;
		background: #E1E1E1;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-family: Source Han Sans-Regular;
		font-weight: 400;
		font-size: 34rpx;
		color: #3D3D3D;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.lijitiyanClass{
		width: 252rpx;
		height: 92rpx;
		background: linear-gradient( 90deg, #FF470B 1%, #FC966E 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-family: Source Han Sans-Regular;
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>
